1 00:00:00,600 --> 00:00:09,690 Hello and welcome to the part two of creatine javascript logic for our countdown timer. 2 00:00:10,440 --> 00:00:18,030 Let's begin by creating some variables that we will use for the time calculations. 3 00:00:18,030 --> 00:00:28,950 For days the hours the minutes and the seconds so I will start by creating a variable for the d d we 4 00:00:28,950 --> 00:00:30,560 are counting down. 5 00:00:30,600 --> 00:00:33,710 So here I've added a line of code here. 6 00:00:33,750 --> 00:00:42,540 Line 7 created a variable called D set that to cause the mass stop flow method. 7 00:00:42,990 --> 00:00:46,180 Inside the opponent this is for the emitter. 8 00:00:46,560 --> 00:00:55,080 We passed a part in this variable here called distancing here and dividing by value imperent is these 9 00:00:55,800 --> 00:01:03,790 time you have values in parentheses the values inside the parentheses are calculated first before this. 10 00:01:03,810 --> 00:01:14,130 For example harby doing a thousand times 60 times 60 times 24 then whatever values we hear will be divided 11 00:01:14,400 --> 00:01:16,030 by distance. 12 00:01:16,300 --> 00:01:23,100 Okay so this is a value of distance would divide that by value that we'll get from this calculation. 13 00:01:23,130 --> 00:01:33,790 So this will give us the what is left to the come down in D next to the can down in hours. 14 00:01:33,810 --> 00:01:42,660 I've created another variable online it called ours has set that to the mass floor method. 15 00:01:42,660 --> 00:01:45,860 Again I'm using the distance variable which is is variable. 16 00:01:45,890 --> 00:01:47,960 Here we use them. 17 00:01:47,970 --> 00:01:50,230 The percent sign here. 18 00:01:50,340 --> 00:01:57,630 So again we calculate the values in parenthesis first so we do in this thousand times 60 times 60 times 19 00:01:57,630 --> 00:02:03,670 24 divided by what we get from the result of this calculation. 20 00:02:03,670 --> 00:02:07,450 Which you said a thousand times 60 times 60. 21 00:02:08,130 --> 00:02:11,690 And here we're using the model or symbol model. 22 00:02:11,740 --> 00:02:15,810 Physically is used to find out me remenda. 23 00:02:16,080 --> 00:02:24,030 When you divide values together in modules we will give you what is left and what advice left were going 24 00:02:24,030 --> 00:02:31,950 to use in masto flawed method to around that number and that will give us the hours we have left to 25 00:02:31,980 --> 00:02:34,040 our count down to. 26 00:02:34,290 --> 00:02:41,400 Next I am going to do the same thing here for the minutes so we can find out how Minutes how many minutes 27 00:02:41,400 --> 00:02:46,360 we have left to our countdown date online 9 here. 28 00:02:46,390 --> 00:02:48,410 Added a variable for limits. 29 00:02:48,440 --> 00:02:55,870 He again said that to the amount of floor and inside the is we've got the distance again. 30 00:02:55,890 --> 00:03:00,220 We are multiplying thousand times Sixty 60. 31 00:03:00,690 --> 00:03:03,550 Divide by thousands and 16. 32 00:03:03,730 --> 00:03:10,260 And once we get the values we are using the model of symbiont the model basically will give us a remender 33 00:03:11,130 --> 00:03:14,690 that will give us the minutes left. 34 00:03:14,700 --> 00:03:19,580 Next we want to do three seconds left line 10. 35 00:03:19,580 --> 00:03:25,170 Here we go variable 4 seconds set it to the mass of floor 8 game. 36 00:03:25,170 --> 00:03:32,820 Were you referencing the distance variable we use in the more deloss and we are multiplying a thousand 37 00:03:32,820 --> 00:03:33,720 by 60. 38 00:03:33,720 --> 00:03:36,280 Dividing by a thousand. 39 00:03:36,650 --> 00:03:42,440 And then we use to model loss where the mass of floor rounded up. 40 00:03:42,450 --> 00:03:50,910 Next thing one to do we want to output the result inside our hastier mouth so this is our terminal here 41 00:03:51,330 --> 00:03:53,910 and inside this paragraph. 42 00:03:53,920 --> 00:03:56,620 This T attribute of root. 43 00:03:56,730 --> 00:04:04,220 This is where we are going to inject the conduct time so come down time I will take kofar this right 44 00:04:04,410 --> 00:04:07,550 here and inject the count down here. 45 00:04:07,590 --> 00:04:11,750 So here is where we are going to put. 46 00:04:11,910 --> 00:04:15,930 So we are going to use the documentor get element by D. 47 00:04:16,350 --> 00:04:18,180 So line 12 and 13. 48 00:04:18,180 --> 00:04:23,240 Basically this is what will output the countdown timer. 49 00:04:23,430 --> 00:04:26,350 It outputted inside the room. 50 00:04:26,430 --> 00:04:30,480 This route here is this paragraph here. 51 00:04:30,560 --> 00:04:35,580 Skinner inject it in there so well will the documents kept. 52 00:04:35,610 --> 00:04:43,440 Remember this is a javascript method and the idea we are talking about is this idea called Root which 53 00:04:43,440 --> 00:04:48,610 is a similar document how we use the inner hastier mail. 54 00:04:48,630 --> 00:04:55,620 Basically what that means it will replace whatever value we have inside this route. 55 00:04:55,840 --> 00:04:59,860 Using it in a hasty amount it will replace that with Days. 56 00:04:59,940 --> 00:05:05,370 It is this variable and this is a child form it all. 57 00:05:05,370 --> 00:05:10,510 I prefer it to be ours which is hey minute second. 58 00:05:10,660 --> 00:05:19,650 So to inject whatever value we have from doing this calculations here or inject that inside this idea 59 00:05:19,890 --> 00:05:28,350 which is the idea attribute of roots so to take over this idea here and inject the come down time out 60 00:05:28,360 --> 00:05:34,380 there the next thing I want to do is implement a conditional statement. 61 00:05:34,390 --> 00:05:45,000 Basically what that will do is tool find a way to stop the countdown time the way we have counted down 62 00:05:45,030 --> 00:05:45,830 to details. 63 00:05:45,840 --> 00:05:55,350 For example when we reach January 1st 2010 this time we want the countdown time to stop. 64 00:05:55,350 --> 00:06:00,720 So to do that I'm going to implement a conditional statement. 65 00:06:00,720 --> 00:06:05,620 So I've added the conditional statement which is this block of code here. 66 00:06:05,850 --> 00:06:13,560 So basically I'm saying if the distance which is the distance variable distance variable is less than 67 00:06:13,560 --> 00:06:25,830 zero and then I'm in the clear interval the Clinton method basically is used to clear a timer so close 68 00:06:25,830 --> 00:06:31,420 in time that you set is in this set into a bar method. 69 00:06:31,480 --> 00:06:42,220 I do value that is returned by this integral method is used as the parameter for the clear interval 70 00:06:42,550 --> 00:06:43,250 method. 71 00:06:43,260 --> 00:06:50,250 Also the key thing to note is that to be able to use the collection of a method you must use a global 72 00:06:50,250 --> 00:06:54,410 variable and create in the interval method. 73 00:06:54,750 --> 00:07:03,000 So here the value x we pass in here is value here which is the name for this value for the set interval 74 00:07:03,090 --> 00:07:03,620 method. 75 00:07:03,650 --> 00:07:11,240 Here we are used in the document or get limited by the which is the name is right. 76 00:07:11,390 --> 00:07:17,340 We are replacing the message here with this innate amount of time expired. 77 00:07:17,520 --> 00:07:23,000 So when that value this distance becomes less than zero. 78 00:07:23,100 --> 00:07:28,900 Then we have reached our countdown date and then the condition will no longer be valid. 79 00:07:28,910 --> 00:07:35,990 It would then call they sicklier into a method using this X here which is this said the interval. 80 00:07:36,030 --> 00:07:40,510 It will then display this method the same time expire. 81 00:07:40,870 --> 00:07:45,260 What we're going to do we're more so going to call the interval here. 82 00:07:45,450 --> 00:07:52,970 So just allow us calibrate his thumb to come up hard typing 1000 or so to 1000. 83 00:07:52,970 --> 00:08:04,070 Basically we represent 1 second which is a mini second 1000 milliseconds represents one second. 84 00:08:04,590 --> 00:08:07,590 So the logic is basically complete. 85 00:08:07,620 --> 00:08:11,370 We should be able to get the time I work in now. 86 00:08:11,520 --> 00:08:18,120 So if we just open up your project and just run the count down to the e-mail file. 87 00:08:18,170 --> 00:08:30,030 Thus my time here says I've got 59 days 20 hours 24 minutes 5 seconds left to my countdown date which 88 00:08:30,030 --> 00:08:34,830 is January 1st 2018 24 clock. 89 00:08:34,860 --> 00:08:36,520 So that's my come down. 90 00:08:36,590 --> 00:08:46,770 Next lecture I'm just going to do a bit of csx to make these fonts or the text size a bit bigger. 91 00:08:46,880 --> 00:08:52,980 And I'm also going to give it a background colour or make this black and make the text white so will 92 00:08:52,980 --> 00:08:54,810 do that in the next lecture. 93 00:08:54,840 --> 00:08:56,040 Thanks for watching. 94 00:08:56,040 --> 00:08:56,900 Bye for now.